<template>
  <div class="my-page">
<!-- 头部 -->
<div class="My_title__39w3V">
  <!-- 背景图 -->
  <img :src="getToken?'http://liufusong.top:8080/img/avatar.png':''"  class="My_bg__2j-VX">
  <!-- 白框 -->
  <div class="My_info__eOYeg">
    <!-- 头像小框 -->
    <div class="My_myIcon__3cKIV">
      <img :src="getToken?'http://liufusong.top:8080'+this.avatar :'http://liufusong.top:8080/img/profile/avatar.png'" alt="" class="My_avatar__2Fbh7">
    </div>
    <div class="My_user__B6O1D">
      <div class="My_name__3U2NB">{{getToken? nickname :'游客'}}</div>
      <div class="My_edit__3wqlv">
        <van-button type="primary" @click='clickFn'>{{getToken? '退出' :'去登录'}}</van-button>
       <div class="My_auth__1KSIg" v-show='getToken ? true :false'>
             编辑个人资料
             <span class="My_arrow__1LOxs"><!-- 扒vant icon -->
              <van-icon name="play" /><!--  -->
              </span>
       </div>
      </div>

    </div>

  </div>
</div>

<!-- 中间 -->
<van-grid :column-num="3">
  <van-grid-item icon="star-o" text="我的收藏" to='/collect'/><!-- 跳转收藏页 -->
  <van-grid-item icon="wap-home-o" text="我的出租" to='/rent'/><!-- 跳转出租页 -->
  <van-grid-item icon="clock-o" text="看房记录" />
</van-grid>
<van-grid :column-num="3">
  <van-grid-item icon="debit-pay" text="成为房主" />
  <van-grid-item icon="user-o" text="我的出租" />
  <van-grid-item icon="service-o" text="看房记录" />
</van-grid>

<!-- 底部 -->
<div class="My_ad__1wZZj">
  <img src="http://liufusong.top:8080/img/profile/join.png" alt="">

</div>

  </div>
</template>

<script>
import { delToken, getToken, setcityValue } from '@/utils/storage'
import { userInfo } from '@/api/user'
export default {
  name: 'my-page',
  data () {
    return {
      avatar: '',
      nickname: ''

    }
  },
  methods: {
    // 退出按钮弹框
    clickFn () {
      if (getToken()) {
        // 局部组件使用要用this.$dialog
        this.$dialog.confirm({
          title: '提示',
          message: '是否确定退出'
        })
        // 确认退出删token 跳转到登录
          .then(() => {
            // on confirm
            delToken()
            this.$toast.success('退出登录成功')
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.$router.push('/login')
      }
    }

  },
  computed: {
    getToken () {
      return getToken()
    }
  },
  // 获取用户信息
  async created () {
    const { body } = await userInfo()
    console.log(body)
    this.avatar = body.avatar
    console.log(this.avatar)
    this.nickname = body.nickname
    setcityValue('AREA|dbf46d32-7e76-1196')
  }

}

</script>

<style>
* {
    box-sizing: border-box;
}
.My_title__39w3V {
   min-height: 300px;
    position: relative;
}
.My_bg__2j-VX {
    width: 100%;
}
img {
    border-style: none;
}
.My_info__eOYeg {
    position: absolute;
    background: #fff;
    width: 85%;
    height: 176px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
}

.My_myIcon__3cKIV {
    position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 5px solid #f5f5f5;
    display: inline-block;
    box-shadow: 0 2px 2px #bdbdbd;}
.My_avatar__2Fbh7 {
    width: 100%;
    border-radius: 50%;
}
.My_edit__3wqlv {
    color: #999;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 30px
}
.My_user__B6O1D {
    padding-top: 15px;
}
.My_name__3U2NB {
    margin-top: -30px;
    margin-bottom: 10px;
}
.My_ad__1wZZj {
    text-align: center;
    margin-top: 10px;
}
.My_ad__1wZZj img {
    width: 92%;
}
.My_auth__1KSIg{
  color: #999;
    font-size: 12px;
    margin-top: 20px;
}

</style>
